<!--
 * @Description: 根据数据字典显示tag
-->

<template>
  <div>
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item.value)">
        <span
          v-if="!item.tagType || item.tagType == ''"
          :key="item.code"
          :index="index"
          >{{ item.name + " " }}</span
        >
        <el-tag
          v-else
          :disable-transitions="true"
          :key="item.code"
          :index="index"
          :type="item.tagType == 'primary' ? '' : item.tagType"
        >
          {{ item.name + " " }}
        </el-tag>
      </template>
    </template>
    <template v-if="showValue && unmatch">
      {{ value }}
    </template>
  </div>
</template>

<script>
export default {
  name: "DictTag",
  components: {},
  props: {
    options: {
      type: Array,
      default: null,
    },
    value: [Number, String, Array],
    // 当未找到匹配的数据时，显示value
    showValue: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:modelValue", "change"],
  setup(props, ctx) {
    const values = computed(() => {
      if (props.value !== null && typeof props.value !== "undefined") {
        return Array.isArray(props.value) ? props.value : [String(props.value)];
      } else {
        return [];
      }
    });
    const unmatch = computed(() => {
      if (props.value !== null && typeof props.value !== "undefined") {
        // 传入值为非数组
        if (!Array.isArray(props.value)) {
          if (props.options.some((v) => v.value == props.value)) return false;
          return true;
        }
        // 传入值为Array
        // props.value.forEach((item) => {
        //   if (!props.options.some((v) => v.value == item))
        // });
        return true;
      }
      // 没有value不显示
      return false;
    });
    return { values, unmatch };
  },
};
</script>

<style lang="scss" scoped></style>
